import React from "react";
import { Form, Input, Select, Button, Space, FormInstance } from "antd";

const { Option } = Select;

interface Props {
	form: FormInstance;
	onSearch: (values: any) => void; // 查询方法类型定义
}

const PostSearchForm: React.FC<Props> = ({ form, onSearch }) => {
	const onFinish = (values: any) => {
		onSearch(values);
	};

	const onReset = () => {
		form.resetFields();
	};

	return (
		<Form form={form} name="advanced_search" onFinish={onFinish} layout="inline">
			<Form.Item name="keyword" label="关键词">
				<Input placeholder="请输入文章关键词" />
			</Form.Item>
			<Form.Item name="queryType" label="排序方式">
				<Select placeholder="请选择排序方式">
					<Option value={1}>最新</Option>
					<Option value={2}>最热</Option>
				</Select>
			</Form.Item>
			<Form.Item name="status" label="文章状态">
				<Select placeholder="请选择文章状态">
					<Option value={0}>下架</Option>
					<Option value={1}>上架</Option>
				</Select>
			</Form.Item>
			<Form.Item>
				<Space>
					<Button type="primary" htmlType="submit">
						查询
					</Button>
					<Button htmlType="button" onClick={onReset}>
						重置
					</Button>
				</Space>
			</Form.Item>
		</Form>
	);
};

export default PostSearchForm;
